<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>批量上传</el-breadcrumb-item>
      <el-breadcrumb-item>快手应用管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--     <el-form inline class="m-table--handle">
      <el-form-item>
        <el-button size="mini" type="primary" @click="handleClickCreate">新增</el-button>
      </el-form-item>
      <CustomTableColumn :columns.sync="tableColumn" />
    </el-form> -->

    <Container>
      <!-- 表格 -->
      <ContainerTitle>快手应用管理</ContainerTitle>
      <el-upload
        class="upload-demo u-mb15"
        :action="`${BASE_URL}/marketing/api/task_app/importApp`"
        :on-change="handleChange"
        :file-list="fileList"
        :show-file-list="true"
      >
        <el-button size="small" type="primary" class="u-mb-15"
          >导入</el-button
        >
      </el-upload>
      <el-table ref="multipleTable" border stripe :data="tableData">
        <!-- @select="select"
        @select-all="selectAll"
        @selection-change="changeTableSelection"-->
        <!-- <el-table-column
          type="selection"
          width="35"
          fixed
          :selectable="handleSelectable"
        >
        </el-table-column>-->
        <el-table-column
          align="center"
          v-for="(item, index) in filterTableColumn"
          :label="item.label"
          :key="index"
        >
          <template slot-scope="scope">
            <!-- 其他 -->
            <template v-if="item.prop === 'status'">
              <div v-html="scope.row.status"></div>
            </template>
            <template v-else>{{ scope.row[item.prop] }}</template>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClickLook(scope.row.taskId)"
              >查看模板内容</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </Container>

    <!-- 运营方式-->
    <el-dialog
      title="模版详情"
      :visible.sync="dialogOperateVisible"
      width="542px"
    >
      <el-alert type :closable="false" class="u-mb20">
        <div v-html="templateData"></div>
      </el-alert>
      <el-row type="flex" justify="end">
        <el-button
          size="small"
          type="primary"
          @click="dialogOperateVisible = false"
          >确定</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import Container from "@/components/container";
import ContainerTitle from "@/components/container-title";
import CustomTableColumn from "@/components/custom-table-column";

import { exportExcel } from "@/utils/fileDown.js";
import { OPERATOR_OPTION, CUSTOMER_ROLE_OPTION } from "@/assets/js/flow-option";
import { mapOptionLabel } from "@/util";

export default {
  name: "flow-account",
  components: {
    Container,
    CustomTableColumn,
    ContainerTitle,
  },
  data() {
    return {
      OPERATOR_OPTION,
      CUSTOMER_ROLE_OPTION,
      // 模版
      dialogOperateVisible: false,
      BASE_URL: process.env.VUE_APP_BASE_URL,
      templateData: "",
      tableData: [],
      tableSelectionData: [],
      fileList:[],
      tableColumn: [
        {
          label: "应用ID",
          prop: "id",
          visible: true,
        },
        {
          label: "应用名称",
          prop: "appName",
          visible: true,
        },
        {
          label: "应用标记",
          prop: "appVersion",
          visible: true,
        },
        {
          label: "应用类型",
          prop: "appPlatform",
          visible: true,
        },
        {
          label: "投放账户",
          prop: "accountName",
          visible: true,
        },
        {
          label: "应用下载链接",
          prop: "appUrl",
          visible: true,
        },
        {
          label: "操作日期",
          prop: "ctime",
          visible: true,
        },
      ],
      page: {
        pageNo: 1,
        pageSize: 100,
      },
      pageTotal: 0,
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter((item) => item.visible);
    },
  },
  methods: {
    mapOptionLabel,
    exportExcel,
    handleChange() {},
    handleClickCreate() {
      // if (!this.tableSelectionData.length) {
      //   return this.$message.warning("请选择需要操作的选项！来确定主账号");
      // }else{
      //   let id =this.tableSelectionData.map(item => item.id)[0]
      //   // console.log(id)
      //   this.$router.push({
      //     name: 'advertise-detail',
      //     query: {
      //       id:id,
      //       action: 'create'
      //     }
      //   })
      // }
      this.$router.push({
        name: "advertise-detail",
        query: {
          action: "create",
        },
      });
    },
    handleClickLook(id) {
      // 获取模版接口
      // console.log(id)
      this.dialogOperateVisible = true;
      this.$http({
        method: "get",
        url: "/marketing/api/task/getTemplateByTaskId",
        params: {
          taskId: id,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.templateData = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    // 运营人员
    getCurrentOperate(data = []) {
      let len = data.length;
      if (len) {
        let item = data[len - 1];
        return `${item.operatorBy}`;
      }
      return "-";
    },

    // 列表
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    getTable() {
      this.$http({
        method: "get",
        url: "marketing/api/task_app/search",
      }).then((res) => {
        if (res.data.code === 1) {
          let data = res.data.data;
          console.log(data);
          this.tableData = data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // handleSelectable() {
    //   return true;
    // },
    // select(selection, row) {
    //   if (selection.length > 1) {
    //     let del_row = selection.shift()
    //     this.$refs.multipleTable.toggleRowSelection(del_row, false)
    //   }
    // },
    // selectAll(selection){
    //   if (selection.length > 1) {
    //     selection.length = 1
    //   }
    // },
    // changeTableSelection(data) {
    //   this.tableSelectionData = data;
    // },
    handlePagerSizeChange(v) {
      this.page.pageSize = v;
      this.getTable();
    },
    handlePagerCurrentChange(v) {
      this.page.pageNo = v;
      this.getTable();
    },
  },
  activated() {
    this.getTable();
  },
};
</script>